<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <h1 class="title">技防设备智能监控系统</h1>
      <div class="time">{{ currentTime }}</div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-container">
      <div class="stat-card" v-for="stat in statsData" :key="stat.type">
        <div class="stat-icon" :class="stat.iconClass">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">
            <count-to 
              :start-val="0" 
              :end-val="stat.value" 
              :duration="2000"
              :decimals="0"
            />
          </div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
        <div class="stat-trend" :class="stat.trend">
          <i :class="stat.trendIcon"></i>
          {{ stat.trendValue }}%
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧地图区域 -->
      <div class="map-section">
        <div class="section-header">
          <h3>设备分布地图</h3>
          <div class="map-controls">
            <el-button size="small" @click="switchMapMode('2d')" :type="mapMode === '2d' ? 'primary' : ''">2D</el-button>
            <el-button size="small" @click="switchMapMode('3d')" :type="mapMode === '3d' ? 'primary' : ''">3D</el-button>
          </div>
        </div>
        <div class="map-container" ref="mapContainer">
          <div id="map" class="map"></div>
        </div>
      </div>

      <!-- 右侧告警信息区域 -->
      <div class="alarm-section">
        <div class="section-header">
          <h3>实时告警信息</h3>
          <el-button size="small" @click="refreshAlarms">刷新</el-button>
        </div>
        <div class="alarm-list">
          <div 
            v-for="alarm in alarmList" 
            :key="alarm.id" 
            class="alarm-item"
            :class="alarm.level"
            @click="handleAlarmClick(alarm)"
          >
            <div class="alarm-icon">
              <i :class="getAlarmIcon(alarm.type)"></i>
            </div>
            <div class="alarm-content">
              <div class="alarm-title">{{ alarm.title }}</div>
              <div class="alarm-desc">{{ alarm.description }}</div>
              <div class="alarm-time">{{ alarm.time }}</div>
            </div>
            <div class="alarm-status" :class="alarm.status">
              {{ alarm.statusText }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部设备类型区域 -->
    <div class="device-types">
      <div 
        v-for="deviceType in deviceTypes" 
        :key="deviceType.type"
        class="device-type-card"
        @click="navigateToDeviceDetail(deviceType.type)"
      >
        <div class="device-icon">
          <i :class="deviceType.icon"></i>
        </div>
        <div class="device-info">
          <div class="device-name">{{ deviceType.name }}</div>
          <div class="device-count">{{ deviceType.count }}台</div>
          <div class="device-status" :class="deviceType.status">
            {{ deviceType.statusText }}
          </div>
        </div>
      </div>
    </div>

    <!-- 告警详情弹窗 -->
    <el-dialog 
      v-model="alarmDialogVisible" 
      title="告警详情" 
      width="600px"
      :before-close="closeAlarmDialog"
    >
      <div v-if="selectedAlarm" class="alarm-detail">
        <div class="detail-item">
          <label>告警类型：</label>
          <span>{{ selectedAlarm.typeName }}</span>
        </div>
        <div class="detail-item">
          <label>告警级别：</label>
          <span :class="selectedAlarm.level">{{ selectedAlarm.levelText }}</span>
        </div>
        <div class="detail-item">
          <label>设备位置：</label>
          <span>{{ selectedAlarm.location }}</span>
        </div>
        <div class="detail-item">
          <label>告警时间：</label>
          <span>{{ selectedAlarm.time }}</span>
        </div>
        <div class="detail-item">
          <label>告警描述：</label>
          <span>{{ selectedAlarm.description }}</span>
        </div>
      </div>
      <template #footer>
        <el-button @click="closeAlarmDialog">关闭</el-button>
        <el-button type="primary" @click="handleAlarmAction">处理告警</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import CountTo from 'vue3-count-to'
import dayjs from 'dayjs'
import AMapLoader from '@amap/amap-jsapi-loader'

const router = useRouter()

// 响应式数据
const currentTime = ref('')
const mapMode = ref('2d')
const mapContainer = ref(null)
const alarmDialogVisible = ref(false)
const selectedAlarm = ref(null)
let map = null
let timer = null

// 统计数据
const statsData = ref([
  {
    type: 'total',
    label: '设备总数',
    value: 1256,
    icon: 'el-icon-monitor',
    iconClass: 'blue',
    trend: 'up',
    trendIcon: 'el-icon-arrow-up',
    trendValue: 12
  },
  {
    type: 'online',
    label: '在线设备',
    value: 1189,
    icon: 'el-icon-success',
    iconClass: 'green',
    trend: 'up',
    trendIcon: 'el-icon-arrow-up',
    trendValue: 8
  },
  {
    type: 'alarm',
    label: '告警数量',
    value: 23,
    icon: 'el-icon-warning',
    iconClass: 'red',
    trend: 'down',
    trendIcon: 'el-icon-arrow-down',
    trendValue: 15
  },
  {
    type: 'offline',
    label: '离线设备',
    value: 67,
    icon: 'el-icon-error',
    iconClass: 'orange',
    trend: 'down',
    trendIcon: 'el-icon-arrow-down',
    trendValue: 20
  }
])

// 设备类型数据
const deviceTypes = ref([
  {
    type: 'cathodic',
    name: '智能阴保',
    count: 156,
    icon: 'el-icon-lightning',
    status: 'normal',
    statusText: '正常'
  },
  {
    type: 'video',
    name: '视频图像',
    count: 234,
    icon: 'el-icon-video-camera',
    status: 'normal',
    statusText: '正常'
  },
  {
    type: 'geological',
    name: '地质灾害',
    count: 89,
    icon: 'el-icon-location',
    status: 'warning',
    statusText: '告警'
  },
  {
    type: 'drone',
    name: '无人机',
    count: 45,
    icon: 'el-icon-airplane',
    status: 'normal',
    statusText: '正常'
  },
  {
    type: 'fiber',
    name: '光纤告警',
    count: 178,
    icon: 'el-icon-connection',
    status: 'error',
    statusText: '故障'
  },
  {
    type: 'laser',
    name: '激光甲烷',
    count: 67,
    icon: 'el-icon-light-bulb',
    status: 'normal',
    statusText: '正常'
  },
  {
    type: 'wire',
    name: '断线报警',
    count: 123,
    icon: 'el-icon-link',
    status: 'warning',
    statusText: '告警'
  },
  {
    type: 'badge',
    name: '电子工牌',
    count: 364,
    icon: 'el-icon-user',
    status: 'normal',
    statusText: '正常'
  }
])

// 告警列表数据
const alarmList = ref([
  {
    id: 1,
    type: 'geological',
    typeName: '地质灾害',
    title: '山体滑坡预警',
    description: '监测点A-12检测到异常位移，建议立即检查',
    time: '2024-01-15 14:30:25',
    level: 'high',
    levelText: '高级',
    status: 'pending',
    statusText: '待处理',
    location: '东经120.5°，北纬30.2°'
  },
  {
    id: 2,
    type: 'fiber',
    typeName: '光纤告警',
    title: '光纤断线告警',
    description: '光纤链路B-08检测到信号中断',
    time: '2024-01-15 14:25:18',
    level: 'medium',
    levelText: '中级',
    status: 'processing',
    statusText: '处理中',
    location: '东经120.3°，北纬30.1°'
  },
  {
    id: 3,
    type: 'wire',
    typeName: '断线报警',
    title: '电力线路断线',
    description: '高压线路C-15检测到电流异常',
    time: '2024-01-15 14:20:12',
    level: 'high',
    levelText: '高级',
    status: 'pending',
    statusText: '待处理',
    location: '东经120.7°，北纬30.3°'
  },
  {
    id: 4,
    type: 'laser',
    typeName: '激光甲烷',
    title: '甲烷浓度超标',
    description: '检测点D-03甲烷浓度达到预警值',
    time: '2024-01-15 14:15:08',
    level: 'medium',
    levelText: '中级',
    status: 'resolved',
    statusText: '已处理',
    location: '东经120.1°，北纬30.0°'
  }
])

// 方法
const updateTime = () => {
  currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}

const initMap = async () => {
  try {
    const AMap = await AMapLoader.load({
      key: 'your-amap-key', // 请替换为您的高德地图API密钥
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar']
    })
    
    map = new AMap.Map('map', {
      zoom: 11,
      center: [120.2, 30.2],
      mapStyle: 'amap://styles/dark'
    })
    
    // 添加设备标记点
    addDeviceMarkers()
    
  } catch (error) {
    console.error('地图初始化失败:', error)
  }
}

const addDeviceMarkers = () => {
  if (!map) return
  
  // 模拟设备位置数据
  const devicePositions = [
    { position: [120.1, 30.0], type: 'laser', name: '激光甲烷检测点' },
    { position: [120.3, 30.1], type: 'fiber', name: '光纤监测点' },
    { position: [120.5, 30.2], type: 'geological', name: '地质灾害监测点' },
    { position: [120.7, 30.3], type: 'wire', name: '电力线路监测点' }
  ]
  
  devicePositions.forEach(device => {
    const marker = new AMap.Marker({
      position: device.position,
      title: device.name,
      icon: getDeviceIcon(device.type)
    })
    map.add(marker)
  })
}

const getDeviceIcon = (type) => {
  const iconMap = {
    laser: '🔴',
    fiber: '🔵',
    geological: '🟡',
    wire: '🟢'
  }
  return iconMap[type] || '⚪'
}

const switchMapMode = (mode) => {
  mapMode.value = mode
  // 这里可以实现2D/3D地图切换逻辑
}

const refreshAlarms = () => {
  // 模拟刷新告警数据
  console.log('刷新告警数据')
}

const handleAlarmClick = (alarm) => {
  selectedAlarm.value = alarm
  alarmDialogVisible.value = true
}

const closeAlarmDialog = () => {
  alarmDialogVisible.value = false
  selectedAlarm.value = null
}

const handleAlarmAction = () => {
  // 处理告警逻辑
  console.log('处理告警:', selectedAlarm.value)
  closeAlarmDialog()
}

const getAlarmIcon = (type) => {
  const iconMap = {
    geological: 'el-icon-location',
    fiber: 'el-icon-connection',
    wire: 'el-icon-link',
    laser: 'el-icon-light-bulb'
  }
  return iconMap[type] || 'el-icon-warning'
}

const navigateToDeviceDetail = (type) => {
  router.push(`/device/${type}`)
}

// 生命周期
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
  initMap()
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.title {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  background: linear-gradient(45deg, #fff, #87ceeb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.time {
  font-size: 18px;
  color: #87ceeb;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.stat-icon.blue { background: linear-gradient(45deg, #4facfe, #00f2fe); }
.stat-icon.green { background: linear-gradient(45deg, #43e97b, #38f9d7); }
.stat-icon.red { background: linear-gradient(45deg, #fa709a, #fee140); }
.stat-icon.orange { background: linear-gradient(45deg, #ff9a9e, #fecfef); }

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

.stat-trend {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.stat-trend.down {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.map-section, .alarm-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
}

.map-container {
  height: 400px;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
  border-radius: 0 0 15px 15px;
}

.alarm-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.alarm-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.alarm-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.alarm-item.high { border-left-color: #f44336; }
.alarm-item.medium { border-left-color: #ff9800; }
.alarm-item.low { border-left-color: #2196f3; }

.alarm-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 18px;
}

.alarm-content {
  flex: 1;
}

.alarm-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.alarm-desc {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 5px;
}

.alarm-time {
  font-size: 11px;
  opacity: 0.6;
}

.alarm-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
}

.alarm-status.pending {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

.alarm-status.processing {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
}

.alarm-status.resolved {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.device-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.device-type-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.device-type-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.device-icon {
  font-size: 36px;
  margin-bottom: 15px;
  color: #87ceeb;
}

.device-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.device-count {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #87ceeb;
}

.device-status {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
}

.device-status.normal {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.device-status.warning {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

.device-status.error {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.alarm-detail {
  padding: 20px 0;
}

.detail-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.detail-item label {
  font-weight: bold;
  width: 100px;
  color: #666;
}

.detail-item span {
  flex: 1;
}

.detail-item .high {
  color: #f44336;
}

.detail-item .medium {
  color: #ff9800;
}

.detail-item .low {
  color: #2196f3;
}

/* 滚动条样式 */
.alarm-list::-webkit-scrollbar {
  width: 6px;
}

.alarm-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.alarm-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.alarm-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .device-types {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
  }
  
  .device-types {
    grid-template-columns: 1fr;
  }
}
</style>
